<template>
  <div class="btn">
    <el-button type="primary" @click="add">新增毕业学生</el-button>
    <el-button type="primary" @click="delall">批量删除</el-button>
    <el-button type="primary" @click="openDialog" :style="{ marginRight: '20px' }"
      >学生批量导入</el-button
    >
    <!-- 上传upload -->
    <el-dialog v-model="props.dialogTableVisible" title="学生批量导入" width="800">
      <el-upload class="upload-demo" drag action="#" :http-request="handlestudent" multiple>
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">拖拽上传 <em>点击上传</em></div>
        <template #tip>
          <div class="el-upload__tip">仅允许导入xls,xlsx文件</div>
        </template>
      </el-upload>
      <template #footer>
        <el-button type="primary" @click="confirm">确认</el-button>
        <el-button @click="closeDialog">取消</el-button>
      </template>
    </el-dialog>
    <!-- 上传upload -->
    <el-button type="primary" @click="handleExport" style="">学生批量导出</el-button>
  </div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue'
import { ref } from 'vue'
import { UploadFilled } from '@element-plus/icons-vue'

const props = defineProps({
  dialogTableVisible: Boolean
})
//另一种的v-mode的弹框显示 这样也可以弹框显示
//父亲
// v-model:visible="dialogTableVisible"
//子
// <el-dialog :model-value="visible" title="学生批量导入" width="800">
// const emit = defineEmits(['']);

// const openDialog = () => {
//   emit('update:visible', true);
// };

// const closeDialog = () => {
//   emit('update:visible', false);
// };
// const props = defineProps({
//   visible: Boolean
// })

const emit = defineEmits([
  'openDialog',
  'closeDialog',
  'toworkadd',
  'toworkdelall',
  'toworkconfirm',
  'toworkhandleExport',
  'toworkhandlestudent'
])

const openDialog = () => {
  emit('openDialog')
}

const closeDialog = () => {
  emit('closeDialog')
}

const add = () => {
  emit('toworkadd')
}

const delall = () => {
  emit('toworkdelall')
}

const confirm = () => {
  emit('toworkconfirm')
}

const handleExport = () => {
  emit('toworkhandleExport')
}

const handlestudent = (file: any) => {
  emit('toworkhandlestudent', file)
}
</script>

<style scoped lang="scss">
.btn {
  display: flex;
  align-items: center;
  height: 50px;
}
</style>
